<template>
    <div>
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>{{type==0?'修改':'新增'}}</span>
            </template>
            <div slot="right">
                <a-button type='primary' @click="returnBack()">返回</a-button>
            </div>
            <div slot="table">
                <eform
                v-if="fields||type==1"
                :formData="formData"
                class="form"
                ref="form"
                :fields="fields"
                >
                    <div slot="type">
                        <a-select 
                        style="width:100%;margin-right:10px;"  
                        @change="handleChange" 
                        allow-clear 
                        placeholder="请选择新闻类型"
                        v-decorator="['type',{rules: [{ required: true, message: '请选择新闻类型' }]}]"
                        >
                            <a-select-option :value="item.type" v-for="(item,index) in newsTypeList" :key="index">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div slot="content">
                        <eQuill
                            @getQuillContent="getQuillContent"
                            v-decorator="['content',{rules: [{ required: true, message: '请输入新闻内容' }]}]"
                            :defaultData="quillInfo"
                        ></eQuill>
                    </div>
                    <div slot="attachFile">
                        <a-tag v-for="(item,index) in fileList" :key="index">
                            {{item.filename}}<a-icon type="close" @click="deleteFile(index)" />
                        </a-tag>
                        <uploadFile 
                            name="上传附件"
                            @returnFileUrl="returnFileUrl"
                        ></uploadFile>
                    </div>
                </eform>
                <div class="quillInfoText" v-html="quillInfo"></div>
                <div class="submitBtn">
                    <a-button @click="returnBack()">取消</a-button>
                    <a-button type="primary" @click="save()">保存</a-button>
                </div>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import {saveNewsApi,getNewsDetailApi,eidtNewsApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import eform from "@/components/common/form"
import eQuill from "@/components/common/eQuill"
import uploadFile from "@/components/common/uploadFile"
export default {
    name:"newsAdd",
    components:{innerCommon,eform,eQuill,uploadFile},
    created(){
        this.newsId=this.$route.query.id
        this.type=this.newsId?0:1
        if(this.type==0){
            this.getToken(getNewsDetailApi,{'newsId':this.newsId},res=>{
                this.quillInfo=res.data.content
                this.fields=res.data
            })
        }
        this.location=[{
            name:"信息发布管理",
            path:''
        },{
            name:"资讯中心",
            path:'/news'
        },{
            name:this.type==0?'修改':'新增',
            path:'/newsAdd'
        }]
        if(this.type==0){
            this.initEdit()
        }
    },
    data(){
        const formData=[
            {
                label:"资讯类型",
                scopedSlots: { customRender: 'type'},
            },
            {
                label:"文章标题",
                prop:"title",
                placeholder:'请输入标题',
                rules:[{required:true,message:'请输入标题'}],
            },{
                label:"资讯内容",
                scopedSlots: { customRender: 'content'},
            },{
                label:"附件",
                scopedSlots: { customRender: 'attachFile'},
            }
        ]
        return{
            location:[],
            fields:null,
            formData,
            quillInfo:'',
            newsId:'',
            type:1,//1是新增 0是修改
            newsTypeList:[{name:'公司动态',type:'company'},{name:'行业政策',type:'policy'},{name:'通知公告',type:"notice"},{name:'下载中心',type:'download'}],
            disabled:false,
            fileList:[]
        }
    },
    methods:{
        initEdit(){
            this.getToken(getNewsDetailApi,{'newsId':this.newsId},res=>{
                this.fields=res.data
                this.fileList=res.data.attachFile||[]
            })
        },
        returnBack(){
            this.$confirm({
                title: '确认返回吗?',
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    this.$router.push({path:'/news'})
                },
                onCancel() {
                },
            });
        },
        getQuillContent(data){
            this.quillInfo=data
            this.$refs.form.form.setFieldsValue({['content']:data})
        },
        deleteFile(data){
            this.fileList.splice(data,1)
        },
        returnFileUrl(data){
            data.data.docUrl.forEach(item=>{
                this.fileList.push(item)
            })
        },
        save(){
            this.$refs.form.form.validateFields().then(res=>{
                let api=''
                let formData={...res,'cover':'1','info':this.getContent().replace(/\s*/g,""),'attachFile':this.fileList.length==0?null:this.fileList}
                if(this.type==1){
                    api=saveNewsApi
                }else{
                    api=eidtNewsApi
                    formData={...formData,'newsId':this.newsId}
                }
                this.getToken(api,formData,data=>{
                    this.$message.success(data.message)
                    this.$router.push({path:'/news'})
                })
            })
        },
        handleChange(){
        },
        getContent(){
            return document.getElementsByClassName('quillInfoText')[0].innerText
        }
    }
}
</script>
